let now_playing = document.querySelector(".now-playing");
let track_art = document.querySelector(".track-art");
let track_name = document.querySelector(".track-name");
let track_artist = document.querySelector(".track-artist");

let playpause_btn = document.querySelector(".playpause-track");
let next_btn = document.querySelector(".next-track");
let prev_btn = document.querySelector(".prev-track");

let seek_slider = document.querySelector(".seek_slider");
let volume_slider = document.querySelector(".volume_slider");
let curr_time = document.querySelector(".current-time");
let total_duration = document.querySelector(".total-duration");

let video_art = document.getElementById('video');

let track_index = 0;
let isPlaying = false;
let updateTimer;

let curr_video = document.createElement('video');
let list_contor = 2; 
let type = "Documentaries";
let list1= 
[{
      name: "",
      artist: "",
      image: "",
      path: "video1.mp4"
    },
    {
      name: "",
      artist: "",
      image: "",
      path: "video2.mp4"
    },
	{
      name: "",
      artist: "",
      image: "",
      path: "video3.mp4"
    }];
	
let list2= 
[{
      name: "",
      artist: "",
      image: "",
      path: "video4.mp4"
    },
    {
      name: "",
      artist: "",
      image: "",
      path: "video5.mp4"
    },
	{
      name: "",
      artist: "",
      image: "",
      path: "video6.mp4"
    }];
	
let list3= 
[{
      name: "",
      artist: "",
      image: "",
      path: "video7.mp4"
    },
    {
      name: "",
      artist: "",
      image: "",
      path: "video8.mp4"
    },
	{
      name: "",
      artist: "",
      image: "",
      path: "video9.mp4"
    }];
	
// Define the tracks that have to be played
let track_list = list1;
function random_bg_color() {

// Get a number between 64 to 256 (for getting lighter colors)
let red = Math.floor(Math.random() * 256) + 64;
let green = Math.floor(Math.random() * 256) + 64;
let blue = Math.floor(Math.random() * 256) + 64;
  
// Construct a color withe the given values
let bgColor = "rgb(" + red + "," + green + "," + blue + ")";
  
// Set the background to that color
document.body.style.background = bgColor;
}

function loadTrack(track_index) {
    clearInterval(updateTimer);
    resetValues();
    curr_video.src = track_list[track_index].path;
    video_art.src = track_list[track_index].path;
    curr_video.load();

    track_art.style.backgroundImage = "url(" + track_list[track_index].image + ")";
    track_name.textContent = track_list[track_index].name;
    track_artist.textContent = track_list[track_index].artist;
    now_playing.textContent = "PLAYING " + (track_index + 1) + " OF " + track_list.length + " [ layer " + list_contor + "]";
  
    updateTimer = setInterval(seekUpdate, 1000);
    curr_video.addEventListener("ended", nextTrack);
    video_art.addEventListener("ended", nextTrack);
    random_bg_color();
	displayMessage(type);
}

function displayMessage(msg) {
    now_playing.textContent = msg;
    //setTimeout(() => {
        //now_playing.innerText = "";
    //}, 9000);
}

function resetValues() {
    curr_time.textContent = "00:00";
    total_duration.textContent = "00:00";
    seek_slider.value = 0;
}
  
// Load the first track in the tracklist
loadTrack(track_index);

function playpauseTrack() {
    if (!isPlaying) playTrack();
    else pauseTrack();
}

function playTrack() {
    video_art.play();
    isPlaying = true;
    playpause_btn.innerHTML = '<i class="fa fa-pause-circle fa-5x"></i>';
}
  
function pauseTrack() {
    video_art.pause();
    isPlaying = false;
    playpause_btn.innerHTML = '<i class="fa fa-play-circle fa-5x"></i>';;
}

function nextTrack() {
    if (track_index < track_list.length - 1)
      track_index += 1;
    else track_index = 0;
    loadTrack(track_index);
    playTrack();
  }
  
  function prevTrack() {
    if (track_index > 0)
      track_index -= 1;
    else track_index = track_list.length;
    loadTrack(track_index);
    playTrack();
  }
  
  function seekTo() {
    let seekto = video_art.duration * (seek_slider.value / 100);
    video_art.currentTime = seekto;
  }
  
  function setVolume() {
    curr_video.volume = volume_slider.value / 100;
  }
  
  function seekUpdate() {
    let seekPosition = 0;
  
    if (!isNaN(video_art.duration)) {
      seekPosition = video_art.currentTime * (100 / video_art.duration);
  
      seek_slider.value = seekPosition;
  
      let currentMinutes = Math.floor(video_art.currentTime / 60);
      let currentSeconds = Math.floor(video_art.currentTime - currentMinutes * 60);
      let durationMinutes = Math.floor(video_art.duration / 60);
      let durationSeconds = Math.floor(video_art.duration - durationMinutes * 60);
  
      if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; }
      if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
      if (currentMinutes < 10) { currentMinutes = "0" + currentMinutes; }
      if (durationMinutes < 10) { durationMinutes = "0" + durationMinutes; }
  
      curr_time.textContent = currentMinutes + ":" + currentSeconds;
      total_duration.textContent = durationMinutes + ":" + durationSeconds;
    }
  }
  
  
  
  
  var container = document.querySelector("body");

  container.addEventListener("touchstart", startTouch, false);
  container.addEventListener("touchmove", moveTouch, false);

  // Swipe Up / Down / Left / Right
  var initialX = null;
  var initialY = null;

  function startTouch(e) {
    initialX = e.touches[0].clientX;
    initialY = e.touches[0].clientY;
  };

  function moveTouch(e) {
    if (initialX === null) {
      return;
    }

    if (initialY === null) {
      return;
    }

    var currentX = e.touches[0].clientX;
    var currentY = e.touches[0].clientY;

    var diffX = initialX - currentX;
    var diffY = initialY - currentY;

    if (Math.abs(diffX) > Math.abs(diffY)) {
      // sliding horizontally
      if (diffX > 0) {
        // swiped left
        console.log("swiped left");
		nextTrack();
		displayMessage(type);
      } else {
        // swiped right
        console.log("swiped right");
		
		prevTrack();
		displayMessage(type);
      }  
    } else {
      // sliding vertically
      if (diffY > 0) {
        // swiped up
        console.log("swiped up");
		change_level(1);
		
      } else {
        // swiped down
        console.log("swiped down");
		change_level(-1);
      }  
    }

    initialX = null;
    initialY = null;

    e.preventDefault();
  };
  
  function change_level(direction) {
	  switch (direction) {
		  case -1: {list_contor--; break;}
		  case 1: {list_contor++;  break;}
	  }
	  
		if (list_contor > 3)
			list_contor = 1;
		else if (list_contor < 1)
			list_contor = 3;
		
		switch(list_contor)
		{
			case 1:
				track_list = list1;
				type="Documentaries";
				break;
			case 2:
				track_list = list2;
				type="Cartoons";
				break;
			case 3:
				track_list = list3;
				type="Trailers";
				break;
		}
		loadTrack(track_index);
		playTrack();
		displayMessage(type);
  }